<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

<title>Online HTML Editor with Preview and Tags Maker</title>

<script src="https://gr-blogtools.googlecode.com/svn/tagsCreator/semi/js/tagsCreator.obus.js" type="text/javascript"></script>
<!--[if lt IE 9]> <script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js">IE7_PNG_SUFFIX=".png"</script><![endif]-->
<style>
html,body{background: #aebcbf;
background: url();
background: -moz-linear-gradient(top, #aebcbf 0%, #6e7774 1%, #0a0809 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#aebcbf), color-stop(1%,#6e7774), color-stop(100%,#0a0809));
background: -webkit-linear-gradient(top, #aebcbf 0%,#6e7774 1%,#0a0809 100%);
background: -o-linear-gradient(top, #aebcbf 0%,#6e7774 1%,#0a0809 100%);
background: -ms-linear-gradient(top, #aebcbf 0%,#6e7774 1%,#0a0809 100%);
background: linear-gradient(to bottom, #aebcbf 0%,#6e7774 1%,#0a0809 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#aebcbf', endColorstr='#0a0809',GradientType=0 );
}
body {position:relative;font-family:verdana;margin:0 auto;padding:10px 5px;width:987px;}
iframe {background:#fff;border:1px solid #222;margin-top:20px;margin-bottom:20px;width:101%;height:500px;display:block;margin:10px 0 10px -0.6%;;}
#code{border-radius:3px;background:#333;color:#fff;border:solid #111;border-width:4px;padding:5px 4px 4px 10px;display:block;width:65%;margin:0;display:block;height:188px;max-width:65%;min-width:65%;min-height:160px;float:left;}
.editor_out{float:right;width:32.5%;height:226px;background:#222 url(https://lh3.googleusercontent.com/-sNc9BpRawBs/UF4QqKzkzpI/AAAAAAAAAAc/Phc_AUeGVTM/h120/bg_grad-H1x65.gif) bottom left repeat;}
.editor_in1{width:95.5%;background:#333;padding:0 3px 3px;border:4px solid #222;border-radius:3px;margin:0;text-align:center;}
.editor_in2{color:#fff;text-align:right;padding-right:20px;}
.editor_in2 a{font:normal 12px Times New Roman, Serif;display:inline-block;padding-top:5px;color:#bbb;text-decoration:none;text-shadow:1px 1px 1px #000;}
.editor_in2 a:link:visited{color:#888;}
.editor_in2 a:hover{color:red;}
.ed_button{font-size:11px;font-family:Tahoma;font-weight:500;color:#aee;text-shadow:1px 1px 1px #000;border:2px outset #555;border:2px solid #222;border-radius:3px;margin:2px 0px 0px;
background:#969ca5;background:url();background:-moz-linear-gradient(top, #969ca5 0%, #4c5056 12%, #474b51 80%, #1d262b 100%);background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#969ca5), color-stop(12%,#4c5056), color-stop(80%,#474b51), color-stop(100%,#1d262b));background:-webkit-linear-gradient(top, #969ca5 0%,#4c5056 12%,#474b51 80%,#1d262b 100%);background:-o-linear-gradient(top, #969ca5 0%,#4c5056 12%,#474b51 80%,#1d262b 100%);background:-ms-linear-gradient(top, #969ca5 0%,#4c5056 12%,#474b51 80%,#1d262b 100%);cursor:hand;cursor:pointer;text-align:center;}
#ed_gr_code.ed_button:nd{display:none;}
input.ed_button:first-of-type{display:none;}
#ed_toolbar_code{margin:0 auto;text-align:center;display:block;position:relative;}
#ed_b_code,#ed_i_code,#ed_p_code{width:25px;}
#ed_strong_code,#ed_table_code,#ed_scripts_code{width:50px;}
#ed_div_code,#ed_pre_code,#ed_via_code,#ed_link_code{width:35px;}
#ed_gr_code,#ed_bQuote_code{width:57px;color:yellow;width:60px;}
#ed_code_code,#ed_nobr_code,#ed_span_code,#ed_form_code{width:40px;}
#ed_em_code,#ed_id_code,#ed_ul_code,#ed_ol_code,#ed_li_code,
#ed_h1_code,#ed_h2_code,#ed_h3_code,#ed_h4_code,
#ed_h5_code,#ed_h6_code,#ed_u_code,
#ed_dl_code,#ed_dt_code,#ed_dd_code,#ed_tr_code,
#ed_tr_code,#ed_td_code,#ed_ins_code,#ed_del_code{width:31px;}
#ed_style_code,#ed_footnote_code,#ed_ext_link_code{width:60px;}
#ed_script_code{width:70px;}
#ed_scripts_code,#ed_but_code{width:55px;}
#ed_style_code,#ed_gr_code,#ed_bQuote_code,#ed_script_code,#ed_scripts_code{color:yellow;}
#ed_spell_code{width:44px;color:red;}
.ed_button:active{color:red;}
.ed_button:focus,#ed_gr_code:focus,#ed_bQuote_code:focus{color:red;}

#ed_b_code,#ed_i_code{width:25px;}
#ed_em_code,#ed_div_code{width:40px;}
#ed_strong_code{width:60px;}
#ed_span_code{width:53px;}
#ed_pre_code,#ed_code_code,#ed_table_code{width:50px;}
#ed_tr_code,#ed_td_code,#ed_dl_code,#ed_dd_code,#ed_dt_code{width:38px;}
#ed_form_code,#ed_button_code{width:60px;}
#ed_gr_code{width:61px;color:lightyellow;}
#ed_link_code{width:55px;}
#ed_ext_link_code{width:67px;}
#ed_img_code,#ed_ins_code,#ed_del_code{width:33px;}

#header-wrap{height:60px;background:#888;border:4px solid #111;border-bottom:none;background:#969ca5;background:url();background:-moz-linear-gradient(top,#969ca5 0%,#4c5056 12%,#474b51 80%,#1d262b 100%);background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#969ca5), color-stop(12%,#4c5056), color-stop(80%,#474b51), color-stop(100%,#1d262b));background:-webkit-linear-gradient(top, #969ca5 0%,#4c5056 12%,#474b51 80%,#1d262b 100%);background:-o-linear-gradient(top, #969ca5 0%,#4c5056 12%,#474b51 80%,#1d262b 100%);background:-ms-linear-gradient(top, #969ca5 0%,#4c5056 12%,#474b51 80%,#1d262b 100%);}
#header-wrap h1{font:bold 30px Times New Roman;margin:0;padding:0;color:#eee;text-align:center;padding-top:10px;text-shadow:1px 1px #fff,-1px -1px #fff,-1px 1px #fff,1px -1px #fff;}
#header-wrap h1 a{color:darkred;text-decoration:none;display:inline-block;}
#header-wrap h1 a:hover{color:red;text-decoration:none;}
a{transition:1s ease;-o-transition:1s ease;-ms-transition:1s ease;-moz-transition:1s ease;-webkit-transition:1s ease;}
button,input{transition:10ms ease;-o-transition:10ms ease;-ms-transition:10ms ease;-moz-transition:10ms ease;-webkit-transition:10ms ease;}
input:active,button:active,input:focus,button:focus{transform:scale(0.95);-o-transform:scale(0.95);-ms-transform:scale(0.95);-moz-transform:scale(0.95);-webkit-transform:scale(0.95);}
button,input.ed_button{height:21px;border-radius:4px;font-size:11px;padding:0 0 2px 0;box-shadow:0 0 1px #ccc;}
input:active,button:active,input:focus,button:focus{border-color:#111;border-radius:6px;box-shadow:0 0 2px #eee;}
</style>
<!--[if lte IE 8]>
<style type="text/css">
#header-wrap{background:#274b51 url(https://lh3.googleusercontent.com/-sNc9BpRawBs/UF4QqKzkzpI/AAAAAAAAAAc/Phc_AUeGVTM/h120/bg_grad-H1x65.gif) top left repeat-x;}
#header-wrap h1{filter: progid:DXImageTransform.Microsoft.Shadow(Strength=2, Direction=35, Color='#ffffff'),filter: progid:DXImageTransform.Microsoft.Shadow(Strength=2, Direction=135, Color='#ffffff'),filter: progid:DXImageTransform.Microsoft.Shadow(Strength=2, Direction=235, Color='#ffffff'),filter: progid:DXImageTransform.Microsoft.Shadow(Strength=2, Direction=335, Color='#ffffff');}
button,input.ed_button{background:url(https://lh6.googleusercontent.com/-sRAIiN1-voU/UF4QqlkR2ZI/AAAAAAAAAAg/M-ITbfEXmNo/h120/bg_grad-H4x23.gif) left center repeat-x;}
</style>
<![endif]-->

<script type="text/javascript">
var grXX = '';
function update()
{
  var textarea = document.grZZ.zzGR;
  var grYY = parent.previewGR.document; 
  if (grXX != textarea.value)
  {
    grXX = textarea.value;
    grYY.open();
    grYY.write(grXX);
    grYY.close();
  }
  window.setTimeout(update, 150);
}
function ngloding () {
    document.getElementById('code');
    update();   
}
 window.setTimeout(ngloding, 300);
// ngloding="update(); document.grZZ.zzGR.select();"
</script>

</head>

<body>
<div id="wrap">
<div id="header-wrap">
	<h1><a href="">Online HTML Editor with Preview and Tags Maker</a></h1>
</div>

<form name="grZZ" method="post" target="previewGR">
<!-- deleted  ngloding="update(); document.grZZ.zzGR.select();"-->
<div class="editor_out">
<div class="editor_in1">
		<script type="text/javascript">edToolbar('code');</script>
</div>
<div class="editor_in2"><a href="http://gubhugreyot-demo-tutorial-blogger-2.blogspot.com" target="_blank">gubhugreyot - demo tutorial blogger</a></div>
</div>
<textarea id="code" name="zzGR">
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=UTF-8">
<title>css3 Animation on Header</title>

<style type="text/css" media="screen">
body{
    font:normal 14px Arial,Sans-serif,Tahoma,Verdana;
    color:#000;
    padding:10px 20px;
}
a:link{
    color:orange;
    text-decoration:none;
}
a:link:visited{
    color:#888;
}
a:hover{
    color:red;
    text-decoration:underline;
}
#header{position:relative;height:100px;margin:0;border-bottom:5px double teal;}
h1.title{
    position:absolute;
    top:-10px;
    font:Times New Roman, Serif; 
    text-shadow:5px 5px 5px #000;   
    padding:5px 12px    
    animation:anima infinite 5s ease-in-out alternate;
    -o-animation:anima infinite 5s ease-in-out alternate;
    -ms-animation:anima infinite 5s ease-in-out alternate;
    -moz-animation:anima infinite 5s ease-in-out alternate;  
    -webkit-animation:anima infinite 5s ease-in-out alternate;
}
@keyframes anima{
    0%{left:0;color:green;}
    50%{left:20%;color:blue;font-size:50px;}
    100%{left:65%;color:red;}
}
@-o-keyframes anima{
    0%{left:0;color:green;}
    50%{left:20%;color:blue;font-size:50px;}
    100%{left:65%;color:red;}
}
@-ms-keyframes anima{
    0%{left:0;color:green;}
    50%{left:20%;color:blue;font-size:50px;}
    100%{left:65%;color:red;}
}
@-moz-keyframes anima{
    0%{left:0;color:green;}
    50%{left:20%;color:blue;font-size:50px;}
    100%{left:65%;color:red;}
}
@-webkit-keyframes anima{
    0%{left:0;color:green;}
    50%{left:20%;color:blue;font-size:50px;}
    100%{left:65%;color:red;}
}
em{color:green;display:block;margin-top:60px;}
</style>

</head>
<body>
<div id="header">
    <h1 class="title">Whould you like this?</h1>
</div>
<p style="font-size:18px;">Try you code at the box above and look look result here!</p>

<p><em>Happy Coding....!</em></p>

<h3><a href="http://gubhugreyot.blogspot.com/" target="_blank" title="Tutorial blogger - blogdetik">gubhugreyot</a></h3>
</body>
</html>
</textarea>
</form>
<div style="clear:both;"></div>
<iframe name="previewGR" id="previewGR"></iframe>
</div>



<!--
<script src="https://gr-blogtools.googlecode.com/svn/tagsCreator/ori/js/tagsCreator.js"></script>
<script src="https://gr-blogtools.googlecode.com/svn/test/tag Creator/tag-creator.js" type="text/javascript"></script>
<script src="http://www.onlinehtmleditor.net/js_quicktags.js" type="text/javascript"></script>-->
</body>
</html>